<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }
  </style>
</head>
<body>
  <div id="app" class="content">    
    <p>
      Ask a yes/no question:
      <input v-model="question">
    </p>
    <p>{{ answer }}</p>   
  </div>
  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
  <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>           
    var app = new Vue({
      el: "#app",
      data: {
        question: '',
        answer: 'I can not give you an answer until you ask a question'
      },      
      watch: {
        question: function(newQuestion) {
          this.answer = 'waiting for you to stop typing....';
          this.getAnswer();
        }
      },
      methods: {
        getAnswer: _.debounce(function() {
          var vm = this;
          if(vm.question.indexOf('?') === -1) {
            vm.answer = 'question usually contain a question mark'
            return;
          }
          vm.answer = 'thinking...';
          axios.get('https://yesno.wtf/api')
            .then(function(response) {
              debugger;
              vm.answer = _.capitalize(response.data.answer);
            })
            .catch(function(error) {
              vm.answer = 'error!could not reach the API';
            })
        }, 500)
      }
    });
  </script>
</body>
</html>